<template>
	<view class="content" v-show="display">
		<view class="hader">
			<!-- add高度组件 -->
			<view class="img_box">
				<view class="img_box">
					<u-swiper :list="list1" :indicator='true' keyName="image" indicatorMode='dot' :height='600' @click="hadeswp"></u-swiper>
				</view>
				<view></view>
				<view class="user_box">
					<view class="user_main">
						<view class="user_head_portrait" @tap="routergo('/pages/me_all/personage/personage')">
							<image v-if="!is_has_token" src="https://can.clkejj.com/static/my_user.png" mode=""></image>
							<image v-else :src="userall.avatar" mode=""></image>
						</view>
						<view class="user_2" @tap="routergo('/pages/me_all/personage/personage')">
							<view class="user_2_1">
								<text v-if="!is_has_token">欢迎您！请登录</text>
								<text v-else>{{userall.username || '请登录'}} Lv{{userall.level || 0}}</text>
							</view>
							<view class="user_2_2">
								<text class="englist_text" v-if="!is_has_token">Welcome！ Kindly log in～</text>
								<text v-else>积分:{{userall.score||0}}</text>
							</view>
							<view class="user_2_3" v-if="is_has_token">
								<u-line-progress :percentage="userall.score/userall.upgrade*100" activeColor="#6F3810"
									:showText="false"></u-line-progress>
							</view>
						</view>
						<view class="user_3" @tap="routergo('/pages/me_all/codeqr/codeqr')">
							<view class="user_code">
								<image src="https://can.clkejj.com/static/Project_drawing 23.png" mode=""></image>
							</view>
							<text>会员码</text>
						</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="gong_gao">
					<image src="https://can.clkejj.com/static/tongzhi.png" mode=""></image>
					<view class="gg_box">
						<view class="scroll_container">
							<view class="scroll_text" v-for="(item,index) in gonggao_list" :key="index">{{item.title}}</view>
						</view>
						<view class="user_quan" @tap="routergo('/pages/me_all/coupon_collection/coupon_collection')">
							<view class="quan_code">
								<image src="@/static/tab/quan.png" mode=""></image>
							</view>
							<text>领券中心</text>
						</view>
					</view>
				</view>
				<view class="card_3">
					<u-swiper :list="list2" keyName="image" :indicator='true' indicatorMode='dot' :height='314' @click="swp"></u-swiper>
				</view>
				<view class="card_waimai">
					<view class="waimai_view" @tap="router(2)" v-if="common.iswm==1">
						<view class="waim_img">
							<image src="https://can.clkejj.com/static/index_1.png" mode=""></image>
						</view>
						<view class="waim_text">外卖配送</view>
						<view class="waim_t_en">Delivery</view>
					</view>
					<view class="waimai_view" @tap="router(1)" v-if="common.iszq==1">
						<view class="waim_img">
							<image src="https://can.clkejj.com/static/index_2.png" mode=""></image>
						</view>
						<view class="waim_text">到店自取</view>
						<view class="waim_t_en">Pickup</view>
					</view>
					<view class="waimai_view" @tap="routerTo('/pages/reserved/reserved')" v-if="common.isyy==1">
						<view class="waim_img">
							<image src="https://can.clkejj.com/static/index_3.png" mode=""></image>
						</view>
						<view class="waim_text">到店堂食</view>
						<view class="waim_t_en">Dine-in</view>
					</view>
				</view>
				<view class="pr_box">
					<view class="pr_item" @tap="link_jump1">
						<view class="pr_title">新朋友来啦
							<text class="bg_color1">好物优选</text>
						</view>
						<view class="pr_text">超多新品上架啦～</view>
						<view class="pr_img_view">
							<image src="https://www.hshtg.cn/imgs/img_1.png" mode=""></image>
							<image src="https://www.hshtg.cn/imgs/img_2.png" mode=""></image>
						</view>
					</view>
					<view class="pr_item" @tap="link_jump2">
						<view class="pr_title">好物好价
							<text class="bg_color2">心动福利</text>
						</view>
						<view class="pr_text">quality&affordability</view>
						<view class="pr_img_view">
							<image src="https://www.hshtg.cn/imgs/img_3.png" mode=""></image>
							<image src="https://www.hshtg.cn/imgs/img_4.png" mode=""></image>
						</view>
					</view>
				</view>
				<!-- <view class="card_1 flexw">
					<view class="card_1_left" @tap="router(1)" v-if="common.iszq==1">
						<view class="card_1_left_title">
							<view>自取</view>
							<view>下单免排队</view>
						</view>
						<view class="card_1_left_img">
							<image src="https://can.clkejj.com/static/Project_drawing 28.png" mode=""></image>
						</view>
					</view>
					<view class="card_1_right" @tap="router(2)" v-if="common.iswm==1">
						<view class="card_1_left_title">
							<view>外卖</view>
							<view>美食送到家</view>
						</view>
						<view class="card_1_left_img">
							<image src="https://can.clkejj.com/static/Project_drawing 29.png" mode=""></image>
						</view>
					</view>
					<view class="card_1_right" @tap="routerTo('/pages/reserved/reserved')" v-if="common.isyy==1"
						style="margin-top: 16rpx;background-color: #ECECFA;">
						<view class="card_1_left_title">
							<view>提前预约</view>
							<view>提前预约，到店直接就餐</view>
						</view>
						<view class="card_1_left_img_1">
							<image src="https://can.clkejj.com/static/yueY.png" mode=""></image>
						</view>
					</view>
					<view class="">
						<view class="card_2_left" v-if="common.ispayh==1"
							:style="{height:common.ists!=='1'?'348rpx':'162rpx'}"
							style="margin-top: 16rpx;background-color: #DAF3EF;" @tap="scanCode(2)">
							<view :class="common.ists!=='1'?'card_2_left_title_2':'card_2_left_title'">
								<view>扫码点餐(餐后支付)</view>
								<view>扫码点餐,饭后付款</view>
							</view>
							<view :class="common.ists!=='1'?'card_2_left_img_2':'card_2_left_img'">
								<image src="https://can.clkejj.com/static/dinanC.png" mode=""></image>
							</view>
						</view>
						<view class="card_2_left" :style="{height:common.ispayh!=='1'?'348rpx':'162rpx'}"
							style="margin-top: 16rpx;background-color: #E1F2FA;" @tap="scanCode(1)"
							v-if="common.ists==1">
							<view :class="common.ispayh!=='1'?'card_2_left_title_2':'card_2_left_title'">
								<view>扫码点餐</view>
								<view>扫码座号二维码即可点餐</view>
							</view>
							<view :class="common.ispayh!=='1'?'card_2_left_img_2':'card_2_left_img'">
								<image src="https://can.clkejj.com/static/saoma_bg.png" mode=""></image>
							</view>
						</view>
					</view>
				</view> -->
				<!-- <view class="card_2">
					<button open-type="contact" @contact="contact">
						<view class="card_2_content">
							<view class="card_2_content_left">
								<view>加盟咨询</view>
								<view>{{public.tel}}</view>
							</view>
							<view class="card_2_content_right">
								<image src="https://can.clkejj.com/static/Project_drawing 3.svg" mode=""></image>
							</view>
						</view>
					</button>
					<view class="card_2_content" @tap="routerTo('/pages/me_all/integral/integral')">
						<view class="card_2_content_left">
							<view>积分商城</view>
							<view>礼券宝物全都有</view>
						</view>
						<view class="card_2_content_right">
							<image src="https://can.clkejj.com/static/Project_drawing 4.svg" mode=""></image>
						</view>
					</view>
				</view> -->
				<!-- <view class="beianhao" v-if="common.mini_filings">
					备案号：{{common.mini_filings || ''}}
				</view> -->
			</view>

			<login :show="enter" @loadpage="loadpage" @closepage='closepage'></login>
			
			<!-- 领券组件 -->
			<!-- <coupn_view></coupn_view> -->
		</view>
		<height :hg='40'></height>
		<barcode id='1' class="barcode" autostart="true" ref="barcode" background="rgb(0,0,0)" frameColor="#1C86EE"
			scanbarColor="#1C86EE" :filters="fil" @marked="success1" @error="fail1"></barcode>
	</view>
</template>
<script>
	import {userInfo,common} from "@/api/public.js"
	import {index_list,store_default,order_empty,seat} from "@/api/comm.js"
	import {message} from "@/api/user.js"
	import {assign,forEach} from "lodash"
	import route from 'uview-ui/libs/util/route'
	// import coupn_view from '@/components/coupn_view/coupn_view'
	export default {
		// components: {coupn_view},
		data() {
			return {
				title: 'Hello',
				// 轮播图
				list1: [],
				list2: [],
				userall: {},
				public: {},
				display: false,
				enter: false,
				common: uni.getStorageSync('public') || '',
				is_has_token:false,
				gonggao_list:[]
			}
		},
		onLoad(e) {
			if (e.pid) {
				uni.setStorageSync('pid', e.pid)
			}
			if (e.scene) {
				let bb = e.scene.split('&')
				let cc = bb[1]
				//2先餐后付款 //1先付款后餐
				uni.setStorageSync('firstPay', cc)
				uni.setStorageSync('option', 3)
				uni.setStorageSync('scene', bb[0])
			}
			// 获取公共参数
			this.index_listApi_1()
			this.index_listApi_2()
		},
		onShow() {
			// this.userInfoApi()
			this.enter = false
			this.get_gonggao()
			this.commonApi()
			this.getUser()
		},

		methods: {
			
			get_gonggao(){
				let params = {
					page: 1,
					limit: 1
				}
				message(params).then((res) => {
					this.gonggao_list = res.data.data
				}).catch((err) => {
					console.log('err: ',err)
				})
			},
			  
			loadpage() {
				this.unloadpage()
			},
			async getUser() {
				let token = uni.getStorageSync('userinfo').token
				if (token) {
					this.is_has_token = true
					let user = await userInfo()
					if (user.code == 1) {
						uni.setStorageSync('user', user.data)
					}
				}else{
					this.is_has_token = false
				}
			},
			scanCode(e) {
				uni.scanCode({
					success: (res) => {
						if (res.path) {
							let option = uni.getStorageSync('option')
							if (option !== 3) {
								order_empty()
							}
							uni.setStorageSync('option', 3)
							uni.setStorageSync('tableNumber', false)
							uni.reLaunch({
								url: res.path
							})
						} else {
							uni.showToast({
								title: "座号二维码有误，请重新扫一扫！",
								icon: 'none'
							})
						}
						// 识别成功，执行对应操作
					}
				})
			},
			commonApi() {
				common().then(data => {
					if (data.code == 1) {
						uni.setStorageSync('public', data.data)
						this.common = data.data
						this.public = Object.assign({}, uni.getStorageSync('public'))
						if (!uni.getStorageSync('user')) {
							uni.setStorageSync('user', data.data)
						}
						this.userall = Object.assign({}, uni.getStorageSync('user'))
						this.display = true
					}
				})

			},
			async router(url) {
				let token = uni.getStorageSync('userinfo')
				if (token) {
					let shop = uni.getStorageSync('shop')
					let idx = uni.getStorageSync('option')
					let data = await store_default({
						id: shop || ''
					})
					if (data.code == 1) {
						if (url == 2) {
							if (data.data.takeaway_switch == 0) {
								uni.showToast({
									title: '该店铺暂不支持外卖',
									icon: "none"
								})
								return
							}
						} else {
							if (data.data.delivery_switch == 0) {
								uni.showToast({
									title: '该店铺暂不支持自提',
									icon: "none"
								})
								return
							}
						}
					}
					if (idx !== url) {
						order_empty()
					}
					uni.setStorageSync('tableNumber', false)
					uni.setStorageSync('option', url)
					uni.reLaunch({
						url: '/pages/order/order'
					})
				} else {
					this.enter = true
				}

			},
			swp(url) {
				uni.reLaunch({
					url: this.list2[url].url
				})
			},
			hadeswp(url) {
				uni.reLaunch({
					url: this.list1[url].url
				})
			},
			contact(e) {},
			async index_listApi_1() {
				let data = await index_list({
					type: 1
				})
				this.list1 = []
				this.list1.push(...data.data)
			},
			async index_listApi_2() {
				let data = await index_list({
					type: 2
				})
				this.list2 = []
				this.list2.push(...data.data)
			},

			routergo(url) {
				if (!uni.getStorageSync('userinfo')) {
					this.enter = true
					// uni.showToast({
					// 	title: '请登录',
					// 	icon: 'none'
					// })
					return
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			//未登录关闭弹出层需要关掉组件
			closepage() {
				this.enter = false
			},
			
			link_jump1(){
				uni.reLaunch({
					//url: '/pages/order/order?jumptype=1'
					url: '/pagesB/order_xinpin/order_xinpin'
				})
			},
			link_jump2(){
				uni.reLaunch({
					//url: '/pages/order/order?jumptype=2'
					url: '/pagesB/order_haowuhaojia/order_haowuhaojia'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.beianhao {
		margin: 20px 0;
		text-align: center;
		font-size: 24rpx;
		color: #b5b5b5;
	}

	.img_box {
		width: 100%;
		height: 692rpx;

		::v-deep .u-swiper__indicator {
			position: absolute;
			bottom: 150rpx !important;
		}

		.img_box {
			position: absolute;
		}
		.user_box{
			width: 100%;
			height: 177rpx;
			position: relative;
			top: 500rpx;
		}
		.user_main {
			width: 704rpx;
			height: 100%;
			background: #fff;
			border-radius: 18rpx;
			display: flex;
			align-items: center;
			margin: 0 auto;
			.user_head_portrait {
				width: 111rpx;
				height: 111rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-left: 32rpx;
			}
			.user_2 {
				margin-left: 30rpx;
				.user_2_1 {
					width: 200px;
					font-size: 32rpx;
					font-weight: 600;
					color: #313539;
					margin-bottom: 5rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.user_2_2 {
					font-size: 24rpx;
					font-weight: 600;
					color: #2F2F2F;
					margin-bottom: 5rpx;
					.englist_text{
						color: #999;
						margin-top: 10rpx;
					}
				}
				.user_2_3 {
					margin-top: 10rpx;
				}
			}
			.user_3 {
				position: absolute;
				right: 40rpx;
				.user_code {
					width: 54rpx;
					height: 54rpx;
					margin: 0 auto;
				}
				text {
					font-size: 24rpx;
					font-weight: 400;
					color: #2F2F2F;
				}
			}
		}
	}

	.card {
		width: 704rpx;
		margin: 0 auto;

		.card_1 {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.card_2_left {
				width: 345rpx;
				border-radius: 16rpx 16rpx;
				padding: 24rpx;
				box-sizing: border-box;
				color: #3D3D3D;
				position: relative;

				.card_2_left_title {
					view:nth-child(1) {
						font-size: 24rpx;
						font-weight: 600;
						// color: #000000;
					}

					view:nth-child(2) {
						font-size: 20rpx;
						font-weight: 400;
						margin-top: 10rpx;
						z-index: 10;
					}
				}

				.card_2_left_img {
					position: absolute;
					bottom: 0rpx;
					right: 0rpx;
					z-index: 0;

					image {
						width: 180rpx;
						height: 180rpx;
					}
				}


				.card_2_left_title_2 {
					margin: 28rpx 0 0;

					view:nth-child(1) {
						font-size: 32rpx;
						font-weight: 600;
						color: #000000;
					}

					view:nth-child(2) {
						font-size: 24rpx;
						font-weight: 400;
						color: #666;
						margin-top: 20rpx;
						width: 150rpx;
						position: relative;
						z-index: 10;
					}
				}

				.card_2_left_img_2 {
					width: 100%;
					height: 100%;
					position: absolute;
					bottom: 0;
					right: 0;
					z-index: 0;
				}

			}

			.card_1_left {
				width: 345rpx;
				height: 348rpx;
				background: #FEFAEE;
				border-radius: 16rpx;
				position: relative;

				.card_1_left_title {
					margin: 50rpx 0 0 20rpx;

					view:nth-child(1) {
						font-size: 32rpx;
						font-weight: 600;
						// color: #000000;
					}

					view:nth-child(2) {
						font-size: 24rpx;
						font-weight: 400;
						color: #666;
						margin-top: 20rpx;
					}
				}

				.card_1_left_img {
					width: 85%;
					height: 100%;
					position: absolute;
					top: 0;
					right: 0;
				}
			}

			.card_1_right {
				width: 345rpx;
				height: 348rpx;
				background: #FFF9F9;
				border-radius: 16rpx;
				position: relative;

				.card_1_left_title {
					margin: 50rpx 0 0 20rpx;

					view:nth-child(1) {
						font-size: 32rpx;
						font-weight: 600;
					}

					view:nth-child(2) {
						font-size: 24rpx;
						font-weight: 400;
						color: #666;
						margin-top: 20rpx;
						width: 190rpx;

					}
				}

				.card_1_left_img {
					width: 100%;
					height: 100%;
					position: absolute;
					bottom: 0;
					right: 0;
				}

				.card_1_left_img_1 {
					width: 60%;
					height: 60%;
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}

		}

		.card_2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx 0;

			.card_2_content {
				width: 342rpx;
				height: 161rpx;
				background: #FFFFFF;
				border-radius: 36rpx 13rpx 13rpx 13rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.card_2_content_left {
					margin-left: 29rpx;
					text-align: left;

					view:nth-child(1) {
						font-size: 32rpx;
						font-weight: 500;
						color: #000000;
					}

					view:nth-child(2) {
						font-size: 24rpx;
						font-weight: 400;
						color: #AAAAAA;
						margin-top: 5rpx;
					}
				}

				.card_2_content_right {
					margin-right: 30rpx;
					width: 85rpx;
					height: 66rpx;
				}
			}
		}
		.gong_gao{
			margin-top: 16rpx;
			background: #fff;
			border-radius: 20rpx;
			padding:30rpx 20rpx;
			display: flex;
			image{
				width: 42rpx;
				height: 42rpx;
				margin-right: 10rpx;
			}
			.gg_box{
				width: 100%;
				display: flex;
				position: relative;
				.scroll_container {
				    width: 80%;
					height: 100%;
				    overflow: hidden;
				    white-space: nowrap;
				    position: relative;
				}
				.scroll_text {
					font-size: 26rpx;
					color: #333;
				    display: inline-block;
				    position: absolute;
				    white-space: nowrap;
				    animation: scrollText 7s linear infinite;
				}
				@keyframes scrollText {
				    from {
				        transform: translateX(100%);
				    }
				    to {
				        transform: translateX(-100%);
				    }
				}
				.user_quan {
					position: absolute;
					right: -10rpx;
					top: -16rpx;
					text-align: center;
					.quan_code {
						width: 45rpx;
						height: 37rpx;
						margin: 0 auto;
						image{
							width: 100%;
							height: 100%;
						}
					}
					text {
						font-size: 24rpx;
						font-weight: 400;
						color: #2F2F2F;
						margin-top: -10rpx;
					}
				}
			}
		}
		.card_3 {
			width: 100%;
			margin-top: 30rpx;
		}
		.card_waimai{
			margin-top: 30rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			display: flex;
			justify-content: center;
			.waimai_view{
				flex: 1;
				text-align: center;
				.waim_img{
					height: 80rpx;
					margin: 10rpx 0;
					image{
						width: 90rpx;
						height: 100%;
					}
				}
				.waim_text{
					font-weight: bold;
					font-size: 28rpx;
					padding: 10rpx 0;
				}
				.waim_t_en{
					color: #999;
					padding-bottom: 5rpx;
				}
			}
		}
		.pr_box{
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			.pr_item{
				width: 49%;
				padding: 20rpx;
				box-sizing: border-box;
				background: #fff;
				border-radius: 20rpx;
				.pr_title{
					display: flex;
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
					text{
						font-weight: normal;
						color: #fff;
						padding: 4rpx 10rpx;
						border-radius: 6rpx;
						font-size: 24rpx;
						margin-left: 8rpx;
						&.bg_color1{
							background: #B67C14;
						}
						&.bg_color2{
							background: #EE4329;
						}
					}
				}
				.pr_text{
					font-size: 28rpx;
					margin-top: 10rpx;
					margin-bottom: 14rpx;
					color: #87604A;
				}
				.pr_img_view{
					display: flex;
					justify-content: space-between;
					image{
						width: 48%;
						height: 140rpx;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
</style>